<!--
 * @Author: Drlong drl1210@163.com
 * @Date: 2023-04-17 09:34:23
 * @LastEditors: Drlong drl1210@163.com
 * @LastEditTime: 2023-04-27 16:06:01
 * @FilePath: \ai_alld:\web-all\urs-ai\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>URS.AI</title>
  <meta name="author" content="Alvaro Trigo Lopez" />
  <meta name="description" content="fullPage fixed header and footer." />
  <meta name="keywords" content="fullpage,jquery,demo,screen,fixed, header,footer, absolute, positioned,css" />
  <meta name="Resource-type" content="Document" />

  <link rel="stylesheet" type="text/css" href="css/fullpage.css" />
  <link rel="stylesheet" type="text/css" href="css/examples.css" />
  <style>
    .loading-box {
      position: absolute;
      z-index: 0;
      left: 45%;
      top: 27%;
      opacity: 0;
    }

    body {
      overflow: hidden;
    }

    .about {
      /* margin-top: 100px; */
      opacity: 0;
    }

    .title_us {
      margin-bottom: 40px;
      /* margin-top: 100px; */
    }

    .title_us h4 {
      color: #ffffff;
      font-family: DINFont_BO;
      font-weight: bold;
      font-size: 36px;
      line-height: normal;
      letter-spacing: 0px;
      text-align: center;
      margin: 0px;
      height: 40px;
    }

    .title_us p {
      color: #ffffff;
      font-family: DINFont;
      font-weight: 100;
      font-size: 24px;
      line-height: normal;
      letter-spacing: 0px;
      text-align: center;
      padding-left: 18%;
      padding-right: 18%;
      margin: 0px;
      line-height: 30px;
      margin-top: 20px;
    }

    .center_us {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      /* margin: 30px 0 30px; */
      padding-left: 10%;
      padding-right: 6%;
    }

    .center_us_cen {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 50px;
      margin-right: 20px;
      width: 31%;
    }

    .center_us_cen img {
      width: 98px;
      height: 98px;
      border-radius: 65px;
      margin-right: 20px;
    }

    .center_us_r {
      /* width: 200px; */
    }

    .center_us_r h4 {
      color: #ffffff;
      font-family: DINFont;
      font-weight: 600;
      font-size: 23px;
      line-height: 30px;
      letter-spacing: 0px;
      text-align: left;
      margin: 0px;
      margin-bottom: 12px;
      /* height: 60px; */
    }

    .center_us_r li {
      color: #ffffff;
      font-family: DINFont;
      font-weight: 100;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: left;
      margin-top: 6px;
      margin: 0px;

      cursor: pointer;
      overflow: hidden;
      /*超出部分隐藏*/
      white-space: nowrap;
      /*不换行*/
      text-overflow: ellipsis;
      /*超出部分文字以...显示*/
    }

    @media (min-width: 1024px) {
      .center_us_r li {
        width: 175px;
      }
    }

    @media (min-width: 1100px) {
      .center_us_r li {
        width: 175px;
      }
    }

    @media (min-width: 1280px) {
      .center_us_r li {
        width: 175px;
      }
    }

    @media (min-width: 1366px) {
      .center_us_r li {
        width: 255px;
      }
    }

    @media (min-width: 1440px) {
      .center_us_r li {
        width: 255px;
      }
    }

    @media (min-width: 1680px) {
      .center_us_r li {
        width: 255px;
      }
    }

    @media (min-width: 1920px) {
      .center_us_r li {
        width: 255px;
      }
    }

    .center_us_r p {
      color: #ffffff;
      font-family: DINFont;
      font-weight: 100;
      font-size: 14px;
      line-height: normal;
      letter-spacing: 0px;
      text-align: left;
      margin-top: 6px;
      margin: 0px;
    }
  </style>

</head>
<script type="text/javascript" src="js/fullpage.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>


<body>


  <audio id="click_audio_home" autoplay="autoplay" loop="loop" controls="controls" src="./audio/home.mp3"></audio>
  <audio id="click_audio_index" preload="auto" controls="controls" src="./audio/click.wav"></audio>
  <div class="click_audio_home_play"></div>

  <div id="header">
    <div class="nav">
      <!-- <div>2</div>
			<div>3</div> -->
      <a href="#" class="mala-logo mala-fl"></a>
      <div class="nav-help">
        <ul class="mala-nav-list mala-clearfix">
          <li class="mala-nav-item mala-fl">
            <a class="mala-nav-link mala-nav-link-home">
              Home</a>
          </li>
          <!-- <li class="mala-nav-item mala-fl">
            <a class="mala-nav-link mala-nav-link-us"> About US</a>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
    <!-- 底部滚动 -->
    <div class="bottom1">
      <div class="bottom1_top">
        <a href="https://twitter.com/URS__ai" target="_blank">
          <img src="images/twitter.png" class="img_1" />
        </a>
        <a href="https://discord.gg/Ytm2ZMJK8G" target="_blank">
          <img src="images/DiscordLogo.png" class="img_1" />
        </a>
        <!-- <img src="images/Medium.png" class="img_1"> -->
        <!-- <img src="images/instagram.png" class="img_1"> -->
      </div>
      <div class="img_mouse">
        <img src="images/mouse.png" />
        <!-- <div>
				<a class="nextone">Click To Next &nbsp;&nbsp;&nbsp;</a>
			</div> -->
        <img src="images/keyboard.png" class="img_keyboard" />
      </div>
    </div>
  </div>
  <div id="lizhi" class="li_bac"></div>
  <div id="fullpage">
    <!-- page-0 -->
    <div class="section" id="section">
      <div class="spinner">
        <div class="blob blob-0"></div>
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
        <div class="blob blob-4"></div>
        <div class="blob blob-5"></div>
        <p class="loading0_tetx" id="loading0_tetx">1%</p>
        <p class="loading0_but" id="loading0_but">BEGIN</p>
      </div>

    </div>
    <!-- page-1 -->
    <div class="section back" id="section0">
      <div id="home_cent" class="home_cent">
        <h4>Easier Process, Better Creation.</h4>
        <p id="ticker" style="font-size: 24px">
          <i class="left-border"></i> URS.Al, the only platform you need to
          create
          <span style="font-size: 26px; font-weight: 600">Al characters that are truly YOURS.</span>
        </p>
      </div>
      <canvas id="canvas"></canvas>
    </div>
    <!-- page-2 -->
    <div class="section back0" id="section1">
      <div class="back0_cent">
        <div class="title1">
          <h4 id="text_0" class="title1_tit">
            Your creativity, our protocol, <br />
            limitless possibilities.
          </h4>
          <p id="textp_0" class="title1_in">
            <i class="left-border"></i> Yours Protocol streamlines Al
            Character creation through a
            <span style="font-weight: 600; color: #3bf3ff">collaborative approach</span>, making it easier than ever to
            bring your characters to life
          </p>
        </div>

        <div class="cent1 lizhi_center">
          <!-- <video id="video_cent1" autoPlay="autoplay" class="video_cent" src="./video/B002.mp4" muted -->
          <video id="video_cent1" autoplay="autoplay" class="video_cent" muted preload="auto" loop width="100%"
            height="600px">
            <source autoplay type="video/mp4" />
          </video>
        </div>
        <!-- <div class="video_interact" id="video_interact">
          Click to interact
        </div> -->
      </div>
    </div>
    <!-- page-3 -->
    <div class="section back1" id="section2">
      <div class="back1_cent">
        <div class="cent_box2">
          <div class="cent_2 cent_2_l">
            <h4 class="cent_2_tit">
              YOUR Creation with <br />
              <span style="
                    font-size: 22px;
                    font-weight: 600;
                    font-family: DINFont_BO;
                    color: #3bf3ff;
                  ">Total Flexibility and Autonomy</span>
            </h4>
            <p class="cent_2_p" style="padding-left: 60px">
              Users can set: basic traits, self-awareness, conversation logic,
              worldview, and more <br />
              All settings for YOUR AI Characters will be <br />
              published onchain to ensure nothing is lost
            </p>
          </div>
          <div class="cent_2 cent_2_r" style="right: 8%">
            <h4 class="cent_2_tit">
              Benefit from collective <br />
              <span style="
                    font-size: 24px;
                    font-weight: 600;
                    font-family: DINFont_BO;
                    color: #3bf3ff;
                  ">
                UGI (User Generated Intelligencel)</span>
            </h4>
            <p class="cent_2_p">
              With everything put on-chain, Yours Protocol enales trustless
              and permissionless tailoring of prompts
              <br />
              Community-built ecosystem brings AI Characters to life with
              richer and more nuanced personalities
            </p>
          </div>
        </div>
        <div class="cent_2_v_box">
          <!-- <video id="video_cent_2" class="cent_2_video" src='./video/C002.mp4' autoPlay="autoplay" muted -->
          <video id="video_cent_2" class="cent_2_video" autoplay="autoplay" muted preload="auto" loop width="100%"
            height="700px">
            <source autoplay type="video/mp4" />
          </video>
        </div>
        <!-- <div class="video_interact_2" id="video_interact_2">
          Click to interact
        </div> -->
      </div>
    </div>
    <!-- page-4 -->
    <div class="section back2" id="section3">
      <div class="video_cen3">
        <!-- <video id="video_cent_3" src='./video/A002.mp4' autoPlay="autoplay" muted preload="auto" loop -->
        <video id="video_cent_3" autoplay="autoplay" muted preload="auto" loop width="700px">
          <source autoplay type="video/mp4" />
        </video>
      </div>
      <!-- <div class="video_interact_3" id="video_interact_3">
        Click to interact
      </div> -->
      <div class="title3">
        <h4 id="text_1" class="title3_tit">Everlasting Stability</h4>
        <p id="textp_1" class="title3_in">
          <i class="left-border"></i> Imagine creating something that will
          <span style="font-weight: 600; font-family: DINFont_BO; color: #3bf3ff">last forever.</span>
          On-chain protocols offer that possibility for YOUR AI characters to
          stand the test of time and always evolving
        </p>
        <h4 class="title3_tit_2">Easy Tailoring</h4>
        <p class="title3_in_2">
          <i class="left-border"></i> Making YOUR perfect AI character
          <span style="font-weight: 600; font-family: DINFont_BO; color: #3bf3ff">
            has never been easier!
          </span>
          Directly chat with others' characters OR easily build upon them to
          create one that fits YOUR exact needs
        </p>
      </div>
    </div>
    <!-- page-4 -->
    <div class="section back3" id="section4">
      <canvas id="canvas_3"></canvas>
      <div class="title4">
        <h4 id="text_4" class="title4_tit">
          Alone we can do so little, together we can do so much.
        </h4>
        <p id="textp_4" class="title4_in">
          Join the first
          <span style="font-weight: 600; font-family: DINFont_BO; color: #3bf3ff">
            community-driven
          </span>
          <br />
          UGI ecosystem today to unlock new possibilities with YOUR
          AIcharacters.
        </p>
        <div class="text_4_but">
          Be the first to experience our MVP - Join Our Community TODAY!
        </div>
      </div>
    </div>
    <!-- <div class="section back4" id="section5">
      <div class="about">
        <div class="title_us">
          <p>
            Our team consists of experts whoare passionate about exploring the
            infinite possibilities of Al beings anshaping the future of Al
            with user-generated intelligence.
          </p>
        </div>
        <div class="center_us">
          <div class="center_us_cen">
            <img src="images/team/John.png" />
            <div class="center_us_r">
              <h4>John - CEO</h4>
              <ul>
                <a title="Former founder of an AI unicorn">
                  <li>Former founder of an AI unicorn</li>
                </a>
                <a title="Previous experience in Stanford Cryptography
                    Laboratory SenseTime (CEO's Office)">
                  <li>
                    Previous experience in Stanford Cryptography Laboratory
                    SenseTime (CEO's Office)
                  </li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Friday.png" />
            <div class="center_us_r">
              <h4>Friday – COO</h4>
              <ul>
                <a title="Johns Hopinks Master of Science">
                  <li>Johns Hopinks Master of Science</li>
                </a>
                <a title="Former Management Trainee at TAL, Project Director at Jicheng">
                  <li>
                    Former Management Trainee at TAL Former Project Director
                    at Jicheng
                  </li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Kelvin.png" />
            <div class="center_us_r">
              <h4>Kelvin – CTO</h4>
              <ul>
                <a
                  title="Postdoctoral fellow at Tsinghua University Specialized in multimodal perception Previous research experience at Microsoft Research and Tencent  ">
                  <li>
                    Postdoctoral fellow at Tsinghua University Specialized in
                    multimodal perception Previous research experience at
                    Microsoft Research and Tencent
                  </li>
                </a>
                <a title="Previous research experience at Microsoft Research, Tencent AI, and Intel Labs.">
                  <li>
                    Previous research experience at Microsoft Research,
                    Tencent AI, and Intel Labs.
                  </li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Alice.png" />
            <div class="center_us_r">
              <h4>Alice – Growth Lead</h4>
              <ul>
                <a title="Harvard Business School deferred MBA">
                  <li>Harvard Business School deferred MBA</li>
                </a>
                <a title="Former Product Manager at Alibaba Group">
                  <li>Former Product Manager at Alibaba Group</li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Edwawrd.png" />
            <div class="center_us_r">
              <h4>Edward - Algorithm Dev Lead</h4>
              <ul>
                <a title="Former Architecture Team Leader for JD">
                  <li>Former Architecture Team Leader for JD</li>
                </a>
                <a title="Former Technical Expert for iQiyi">
                  <li>Former Technical Expert for iQiyi</li>
                </a>
              </ul>
            </div>
          </div>

          <div class="center_us_cen">
            <img src="images/team/Yumi.png" />
            <div class="center_us_r">
              <h4>Yumi – NLP Lead</h4>
              <ul>
                <a title="Doctor of AI Chatbot Architecture Design from Johns Hopkins University">
                  <li>
                    Doctor of AI Chatbot Architecture Design from Johns
                    Hopkins University
                  </li>
                </a>
                <a title="Previous research experience at Microsoft Research and Amazon Alexa AI">
                  <li>
                    Previous research experience at Microsoft Research and
                    Amazon Alexa AI
                  </li>
                </a>
              </ul>
            </div>
          </div>

          <div class="center_us_cen">
            <img src="images/team/Grey.png" />
            <div class="center_us_r">
              <h4>Grey - Reserach Leao</h4>
              <ul>
                <a title="Former cloud architecture engineer at Microsoft">
                  <li>Former cloud architecture engineer at Microsoft</li>
                </a>
                <a title="Decentralized storage architecture design">
                  <li>Decentralized storage architecture design</li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Kael.png" />
            <div class="center_us_r">
              <h4>Kael – Product Lead</h4>
              <ul>
                <a title="Master of Psychology at Peking University">
                  <li>
                    Master of Psychology at Peking University
                  </li>
                </a>
                <a title="Former Senior Product Manager at Lingxin Intelligent Technology Co., Ltd.">
                  <li>
                    Former Senior Product Manager at Lingxin Intelligent Technology Co., Ltd.
                  </li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Victor.png" />
            <div class="center_us_r">
              <h4>Victor – UX Lead</h4>
              <ul>
                <a title="Former Growth Design Lead at Soul">
                  <li>
                    Former Growth Design Lead at Soul
                  </li>
                </a>
              </ul>
            </div>
          </div>
          <div class="center_us_cen">
            <img src="images/team/Mark.png" />
            <div class="center_us_r">
              <h4>Mark – Contract Deve Lead
              </h4>
              <ul>
                <a title="Ph.D @ Emory with specialization in distributed systems. ">
                  <li>
                    Ph.D @ Emory with specialization in distributed systems. 
                  </li>
                </a>
                <a title="Prev. research experience in CEX research labs and security related projects">
                  <li>
                    Prev. research experience in CEX research labs and security related projects
                  </li>
                </a>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- page-4 -->
    <!-- <div class="section" id="section1">
			<div class="slide" id="slide1">
				<div class="intro">
					<h1>How to do it</h1>
					<p>
						You will need to place your header and footer outside the plugin's wrapper.
						This way it won't move on scrolling. Take a look at the source code of this page.
					</p>
				</div>
			</div>

			<div class="slide" id="slide2">
				<h1>Slide 2</h1>
				<img src="imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
			</div> 
		</div> -->
  </div>


  <!-- <script type="text/javascript" src="js/examples.js"></script> -->
  <script type="module" src="js/index.js"></script>



  <!-- <script src="js/liji-bac.js"></script> -->
  <!-- lizi -->

  <script src="js/three.min.js"></script>
  <script src="js/script.js"></script>

  <!-- lizi-end -->


  <!-- home -->
  <!-- <script type="module" src="js/home_script.js"></script> -->
  <script type="" src="js/home_scrollReveal.js"></script>
  <!-- home end -->



  <script type="text/javascript">
    // var myFullpage = new fullpage('#fullpage', {
    // 	anchors: ['firstPage', 'secondPage', '3rdPage'],
    // 	// sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
    // 	css3: true
    // });


    $(document).ready(function () {
      window.localStorage.removeItem('visit_show')
      var count = 0;
      var countArr = [1, 2, 3, 4];
      var fill = document.getElementById("loading0_tetx");
      setTimeout(() => {
        var timer = setInterval(() => {
          count = count + countArr[Math.floor(Math.random() * countArr.length)];
          fill.innerHTML = count >= 100 ? '100%' : `${count}%`;
          if (count >= 100) {
            clearInterval(timer)
            setTimeout(() => {
              $(".loading0_tetx").css({
                opacity: 0,
              });
              $(".loading0_but").css({
                opacity: 1,
              });

            }, 1000);
          }
        }, 77);
      }, 800);



      setTimeout(() => {
        $(".home_cent").removeClass("home_cent_ach");
        $(".home_cent").toggleClass("home_cent_ac");
      }, 3000);




    });
  </script>
  <script>
    // setTimeout(() => {
    var video_1 = document.getElementById("video_cent1");
    var video_2 = document.getElementById("video_cent_2");
    var video_3 = document.getElementById("video_cent_3");
    video_1.src = "./video/B002.mp4";
    video_2.src = "./video/C002.mp4";
    video_3.src = "./video/A002.mp4";
    // });
    // function resize() {
    //   let devicewidth = document.documentElement.clientWidth;
    //   let scale = devicewidth / 1920;
    //   document.body.style.zoom = scale;
    // }
    // resize()
    // window.onresize = function () {
    //   resize();
    // };
  </script>
</body>

</html>